<template>
  <view class="content">
    <view class="item-main"  @click="showcate" v-if="cid > 0">
      <img :src="detail.image" />
      <view class="item-desc">
        {{detail.name}}
        <!-- <view class="tags">博士指导 全程放心</view> -->
        <view class="money"
          >¥
          <text>{{detail.price}}</text>
          <!--                    <view @click="go" class="buy">立即订购</view>-->
        </view>
      </view>
    </view>
	<view class="item-main"  @click="showcate" v-else>
	  <view class="item-desc">
	    选择鉴定分类
	  </view>
	</view>
	<view class="item-main" style="margin-bottom: unset;">
		鉴定商品：
	</view>
	<view class="item-main"  style="margin-top: unset;">
		
	  <img :src="goodsdetail.image" />
	  <view class="item-desc">
	    {{goodsdetail.name}}
	  </view>
	</view>
    <view class="form">
      <u--form
        ref="uForm"
        labelPosition="top"
        labelWidth="200"
      >
        <u-form-item label="添加寄样图片" prop="userInfo.sex" ref="item1">
          <view class="upload">
			<u-upload
					:fileList="fileList1"
					@afterRead="afterRead"
					@delete="deletePic"
					name="1"
					multiple
					:maxCount="9"
				></u-upload>
          </view>
        </u-form-item>
      </u--form>
    </view>
    <view class="footer">
      <u-button
        color="linear-gradient(90deg, #0096FF 0%, #003DB1 100%)"
        class="hande"
		@click="submit"
        >支付订单</u-button
      >
    </view>
	<u-picker :show="cateshow" :columns="cates" :keyName="keyName" @cancel="close" @confirm="changeHandler"></u-picker>
    <u-modal :show="show" :showConfirmButton="false">
      <view class="slot-content">
        <view> 鉴定流程介绍</view>
        <text>专业鉴别报告，鉴别结果清晰明确</text>
        <img src="@/assets/Mask group.png" />
        <u-button
          @click="show = false"
          color="linear-gradient(90deg, #0096FF 0%, #003DB1 100%)"
          class="hande"
          >确认流程</u-button
        >
      </view>
    </u-modal>
  </view>
</template>
<script>
export default {
  name: "index",
  components: {},
  data() {
    return {
      fileList1: [],
      show: false,
	  gid:0,
	  cid:0,
	  ctext:"",
	  cates:[],
	  cateshow:false,
	  keyName:"name",
	  detail:{},
	  goodsdetail:{}
    };
  },
  onLoad(e) {
	  if(e.id){
		  this.gid = e.id
	  }
  	this.getcate()
	this.getdetail() 
  },
  methods: {
	  close(){
		this.cateshow = false
	  },
	  changeHandler(e){
		console.log(e)  
		this.cid = e.value[0].id
		this.detail = e.value[0]
		this.ctext = e.value[0].name
		this.cateshow = false
	  },
	  showcate(){
		  this.cateshow = true
	  },
	  getdetail() {
	    var that = this;
	    this.$.ajax(
	      1,
	      "POST",
	      "/index/getgoodsdetail",
	      {
	        id: this.gid,
	      },
	      (res) => {
	        that.goodsdetail = res.data.detail;
	      }
	    );
	  },
	  getcate(){
		  var that = this
		  this.$.ajax(1, "POST", "index/get_appraisal_category", {
		  	gid:this.gid,
		  	cid:this.cid
		  }, (res) => {
			  console.log(res.data)
			  that.cates.push(res.data.list)
			  console.log(that.cates)
		  })
	  },
	  submit(){
	  	var image = []
	  	this.fileList1.forEach((item,index)=>{
	  				  image.push(item.url)
	  	})
		if(this.gid == 0){
			this.$.ti_shi('请选择商品');return;
		}
		if(this.cid == 0){
			this.$.ti_shi('请选择分类');return;
		}
		if(image.length == 0){
			this.$.ti_shi('请上传图片');return;
		}
	  	this.$.ajax(1, "POST", "user/submit_appraisal_order", {
	  		gid:this.gid,
			cid:this.cid,
			file:image.join(',')
	  	}, (res) => {
	  		if(res.code == 1){
				uni.requestPayment({
					"provider": "wxpay", 
					timeStamp: res.data.timeStamp,
					nonceStr: res.data.nonceStr,
					package: res.data.package,
					signType: 'MD5',
					paySign: res.data.sign, 
					success(res) {
						console.log(res)
						setTimeout(()=>{
							uni.navigateTo({
								url:'/pages/person/jdorderlist?status=1'
							})
						},1000)
					},
					fail(e) {
						console.log(e)
					}
				})
			}
	  	})
	  },
	  deletePic(event) {
	  	this[`fileList${event.name}`].splice(event.index, 1)
	  },
	  // 新增图片
	  async afterRead(event) {
	  	// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
	  	let lists = [].concat(event.file)
	  	let fileListLen = this[`fileList${event.name}`].length
	  	lists.map((item) => {
	  		this[`fileList${event.name}`].push({
	  			...item,
	  			status: 'uploading',
	  			message: '上传中'
	  		})
	  	})
	  	for (let i = 0; i < lists.length; i++) {
	  		const result = await this.uploadFilePromise(lists[i].url)
	  		let item = this[`fileList${event.name}`][fileListLen]
	  		this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
	  			status: 'success',
	  			message: '',
	  			url: result
	  		}))
	  		fileListLen++
	  	}
	  },
	  uploadFilePromise(url) {
	  	var that = this
	  	return new Promise((resolve, reject) => {
	  		let a = uni.uploadFile({
	  			url: that.$.ajax_url+'index/upload', // 仅为示例，非真实的接口地址
	  			filePath: url,
	  			name: 'file',
	  			formData: {
	  				user: 'test'
	  			},
	  			success: (res) => {
	  				console.log(   )
	  				// setTimeout(() => {
	  					resolve(JSON.parse(res.data).data.url)
	  				// }, 1000)
	  			}
	  		});
	  	})
	  },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
.content {
  .slot-content {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10rpx;
    //margin:0 20rpx;
    view {
      font-size: 36rpx;
      font-weight: 700;
    }
    text {
      font-size: 24rpx;
      font-weight: 400;
      color: #999999;
    }
    img {
      height: 192rpx;
      // height: auto;
      width: 610rpx;
      margin: 20rpx 0;
    }
    .hande {
      width: 95%;
    }
  }
  .footer {
    padding: 20rpx;
    position: fixed;
    bottom: 0;

    width: 100%;

    .hande {
      color: #ffffff;
      border-radius: 6px;
      font-size: 13px;
    }
  }
  .form {
    margin: 20rpx;
    background-color: #fff;
    border-radius: 12px;
    padding: 30rpx;
    .upload {
      margin-top: 20rpx;
      display: flex;
      flex-direction: column;
      gap: 20rpx;
      color: #999999;
      font-size: 12px;
      font-weight: 400;
    }
  }
  .item-main {
    margin: 20rpx;
    background-color: #fff;
    border-radius: 12rpx;
    padding: 20rpx;
    display: flex;
    gap: 20rpx;
    .item-desc {
      flex: 1;
      font-size: 28rpx;
      font-weight: 700;
      display: flex;
      flex-direction: column;
      gap: 20rpx;
      .tags {
        font-size: 20rpx;
        font-weight: 400;
        color: #999999;
      }
      .money {
        //display: flex;
        //align-items: end;
        //justify-content: space-between;
        font-size: 20rpx;
        font-weight: 700;
        gap: 20rpx;
        text {
          //flex: 1;
          text-align: left;
          font-size: 28rpx;
        }
        //.buy{
        //    background-color: #3B93FF;
        //    color: #FFFFFF;
        //    width: 144rpx;
        //    height: 58rpx;
        //    line-height: 58rpx;
        //    text-align: center;
        //    border-radius: 8rpx;
        //
        //}
      }
    }
    img {
      width: 140rpx;
      flex-shrink: 0;
      height: 140rpx;
      border: 1rpx solid #f4f4f4;
      border-radius: 14rpx;
    }
  }
}
</style>

